<template>
  <div class="show">
    <div style="margin: 20px 0;"></div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
             <el-button type="primary" plain v-on:click="returnMain()">返回</el-button>
             <el-button type="danger" plain v-on:click="delet()" class="right" v-if="user.userKind=='管理员'">删除</el-button>
            <h1 align="center">{{news.title}}</h1>
            <div style="margin: 10px 0;">
            <a class="time">{{news.time}}</a><br>
            <a class="time">{{news.writer}}</a>
            </div>
        </div>
        <div class="text item">
            <div class="content">
                
                <pre
                style="font-family:Avenir,Helvetica,Arial,sans-serif; 
                       margin-bottom:5px;
                       margin-left:5px;
                       line-height:18px;
                       white-space:break-spaces;"
                        >{{news.content}}</pre>

                <div class="demo-image__placeholder">
                    <div class="block">
                        <br>
                        <el-image :src="'http://120.77.71.211:9090/mynewsweb/'+news.path"></el-image>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-input
                placeholder="留下你的精彩评论吧"
                prefix-icon="el-icon-edit"
                v-model="userComment.content"
                style="width:77%">
            </el-input>
            <el-button type="primary" plain icon="el-icon-position" v-on:click="comment()">提交评论</el-button>
        </div>

      <el-col
        :span="20"
        v-for="(a,index) in comments"
        :key="a.id"
        :offset="index =0"
        style="width:100%"
      >
        <el-card>
            
                <div>
                    <a class="username">{{a.userName}}</a>&nbsp;&nbsp;<a class="time">{{a.time}}</a>
                    <div style="margin: 5px 0;">
                        <a class="a">{{a.content}}</a>
                    </div>
                </div>
            
        </el-card>
      </el-col>
    </el-card>
  </div>
</template>

<script>
export default {
    name:"Shownews",
    data(){
        return{
        news:{
            userName:'',
        },//新闻信息
       user: {
                userName: '',
                userKind:'',
                },//用来存放用户登录信息
        comments:[],//评论信息
        userComment:{
            userId:'',
                newId:'',
                userName:'',
                content:'',
            }//存放发表评论的信息
        }
    },

    methods: { //自定义函数
        oneNew(){
            //获取对应id信息
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start+1);
            console.log(id);
            var _this = this;
            //获取该新闻
            this.$axios.get("http://120.77.71.211:9090/mynewsweb/api/findOne?id="+id).then(res=>{
                console.log(res.data);
                _this.news = res.data;
            });
        },
       
        showComments(){
                 //获取对应id信息
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start+1);
            console.log(id);
            var _this = this;
            //获取该新闻的评论
            this.$axios.get("http://120.77.71.211:9090/mynewsweb/api/showComment?newId="+id).then(res=>{
                console.log(res.data);
                _this.comments = res.data;
            });
        },
        comment(){
            var userString=localStorage.getItem("user");
            if(userString){
                this.user=JSON.parse(userString);
            this.userComment.userName=this.user.userName;
            this.userComment.userId=this.user.userId;
            var start = location.href.lastIndexOf("=");
            var id = location.href.substring(start+1);
            this.userComment.newId=id;
            this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/addComment", this.userComment).then((res) => {
                console.log(res.data);
                if (res.data.state) {
                alert(res.data.msg);
                this.showComments();
                this.userComment={}
                } else {
                alert(res.data.msg);
                }
            }); 
            }else{
               alert("您尚未登录，登录后尚可评论") 
               this.userComment={}
            }
           
        },
        returnMain(){
            this.$router.push("/mainTable");
            
        },
         delet(){
            this.$axios.post("http://120.77.71.211:9090/mynewsweb/api/deleteNew", this.news).then((res) => {
                if (res.data.state) {
                    alert(res.data.msg);
                    this.$router.push("/mainTable");
                } else {
                    alert(res.data.msg);
                }
            });
        },


    },
    

    created(){//生命周期函数
        var userString = localStorage.getItem("user");
            if (userString) {
                this.user = JSON.parse(userString);
        }

        //调用获取新闻和评论的方法

          this.oneNew();  
          this.showComments();
    }
}
</script>

<style>
    .show{
        width: 60%;
        margin:0 auto;
    }
    .title{
        font-size:'600px',
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
        
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width:100%;
    }

    .left{
        float: left;
        width:150px; 
        height:100%
    }

    .right{
        float: right;
    }
    .content{
        width:90%;
        margin:0 auto;
    }

    .a{
        float: right;
        width: 95%;

    }
    .username{
        font-weight:bolder;
    }
    .time{
        font-weight: lighter;
    }
</style>